<template>
  <q-page padding>
    <div class="text-subtitle1">
      竞赛动态
    </div>
    <div class="q-pa-md">
      <q-list bordered separator>
        <template v-for="(news, idx) in newsList" :key="idx">
          <q-item clickable v-ripple @click="$router.push({ path: '/news/detail/' + news.pk })">
            <q-item-section>
              <q-item-label>{{ news.title }}</q-item-label>
              <q-item-label caption>{{ news.cate_name }}</q-item-label>
              <q-item-label caption>{{ news.date }}添加</q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-list>
    </div>
  </q-page>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'News',

  async mounted () {
    await this.$store.dispatch('comp/getNewsList')
      .then(list => {
        this.newsList = list
        console.log('??', list)
      })
  },
  data () {
    return {
      newsList: ref([])
    }
  }
}
</script>
